<template>
	<div>
		<div class="main-content">
			<div class="data-content">
				<div class="table-content">
					<div class="table-title">
						<div class="title-text">我的留言</div>
						<el-button type="primary" @click="addClick">新增留言</el-button>
					</div>
					<el-table
						:data="dataList"
						border
						v-loading="dataListLoading"
						style="width: 100%;">
						<el-table-column
							prop="jieshouren"
							header-align="center"
							align="center"
							label="接收人">
						</el-table-column>
						<el-table-column
							prop="liuyanshijian"
							header-align="center"
							align="center"
							label="留言时间">
						</el-table-column>
						<el-table-column
							prop="content"
							header-align="center"
							align="center"
							label="留言内容">
						</el-table-column>
						<el-table-column
							prop="huifu"
							header-align="center"
							align="center"
							label="回复内容">
						</el-table-column>
					</el-table>
					<el-pagination
						@size-change="sizeChangeHandle"
						@current-change="currentChangeHandle"
						:current-page="pageIndex"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pageSize"
						:total="totalPage"
						layout="total, sizes, prev, pager, next, jumper"
						class="pagination-content">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog
			v-model="dialogVisible"
			title="新增留言"
			width="50%"
			destroy-on-close>
			<el-form :model="dataForm" ref="dataFormRef" :rules="rules" label-width="100px">
				<el-form-item label="接收人" prop="jieshouren">
					<el-select v-model="dataForm.jieshouren" placeholder="请选择接收人" style="width: 100%">
						<el-option
							v-for="item in studentOptions"
							:key="item.id"
							:label="item.xuehao"
							:value="item.xuehao">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="留言内容" prop="content">
					<el-input type="textarea" v-model="dataForm.content" :rows="4" placeholder="请输入留言内容"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	
	// 数据列表
	const dataList = ref([])
	// 分页
	const pageIndex = ref(1)
	const pageSize = ref(10)
	const totalPage = ref(0)
	// 加载
	const dataListLoading = ref(false)
	// 弹窗
	const dialogVisible = ref(false)
	// 表单数据
	const dataForm = ref({
		content: '',
		liuyanren: context?.$toolUtil.storageGet('adminName'),
		jieshouren: ''
	})
	// 学生选项
	const studentOptions = ref([])
	// 表单验证
	const dataFormRef = ref(null)
	const rules = {
		jieshouren: [
			{ required: true, message: '请选择接收人', trigger: 'change' }
		],
		content: [
			{ required: true, message: '请输入留言内容', trigger: 'blur' }
		]
	}

	// 获取数据列表
	const getDataList = () => {
		dataListLoading.value = true
		context?.$http({
			url: 'liuyan/list',
			method: 'get',
			params: {
				page: pageIndex.value,
				limit: pageSize.value,
				sort: 'id',
				order: 'desc',
				liuyanren: context?.$toolUtil.storageGet('adminName')
			}
		}).then(res => {
			if (res.data.code === 0) {
				dataList.value = res.data.page.list
				totalPage.value = res.data.page.totalCount
			}
			dataListLoading.value = false
		})
	}

	// 每页数
	const sizeChangeHandle = (val) => {
		pageSize.value = val
		pageIndex.value = 1
		getDataList()
	}

	// 当前页
	const currentChangeHandle = (val) => {
		pageIndex.value = val
		getDataList()
	}

	// 获取学生列表
	const getStudentList = () => {
		context?.$http({
			url: 'xuesheng/list',
			method: 'get',
			params: {
				page: 1,
				limit: 1000
			}
		}).then(res => {
      console.log(res)
			if (res.data.code === 0) {
				studentOptions.value = res.data.data.list
			}
		})
	}

	// 新增点击
	const addClick = () => {
		dialogVisible.value = true
		dataForm.value = {
			content: '',
			liuyanren: context?.$toolUtil.storageGet('adminName'),
			jieshouren: ''
		}
	}

	// 提交表单
	const submitForm = () => {
		dataFormRef.value.validate((valid) => {
			if (valid) {
				context?.$http({
					url: 'liuyan/save',
					method: 'post',
					data: dataForm.value
				}).then(res => {
					if (res.data.code === 0) {
						context?.$toolUtil.message('提交成功', 'success')
						dialogVisible.value = false
						getDataList()
					} else {
						context?.$toolUtil.message(res.data.msg, 'error')
					}
				})
			}
		})
	}

	onMounted(() => {
		getDataList()
		getStudentList()
	})
</script>

<style lang="scss" scoped>
.main-content {
	padding: 20px;
	.data-content {
		background: #fff;
		padding: 20px;
		border-radius: 4px;
		.table-content {
			.table-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				.title-text {
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}
}
.pagination-content {
	margin-top: 20px;
	text-align: right;
}
</style> 